<template>
  <a-modal
    title="批量导入终端型号"
    v-model="show"
    :maskClosable="false"
    :width="1050"
    placement="right"
    :closable="true"
    @cancel="onClose"
    :footer="null"
    :visiable="modelUploadVisiable">

    <div style="width: 100%">
      <div class="option-area">
        <a-upload
          class="upload-area"
          :fileList="fileList"
          :remove="handleRemove"
          :disabled="fileList.length === 1"
          :beforeUpload="beforeUpload">
          <a-button>
            <a-icon type="upload"/>
            选择.xlsx文件
          </a-button>
        </a-upload>

        <div class="button-area">
          <a-button type="primary" @click="downloadTemplate" style="margin-right: .5rem">
            模板下载
          </a-button>
          <a-button
            @click="handleUpload"
            :disabled="fileList.length === 0"
            :loading="uploading">
            {{uploading ? '导入中' : '导入Excel' }}
          </a-button>
        </div>
      </div>

      <model-import-result
        @close="handleClose"
        :importData="importData"
        :errors="errors"
        :times="times"
        :importResultVisible="importResultVisible">
      </model-import-result>
    </div>

  </a-modal>
</template>

<script>

  import ModelImportResult from './ModelImportResult'

  export default {

    components: {ModelImportResult},

    name: "ModelImport",

    data() {
      return {
        fileList: [],
        importData: [],
        times: '',
        errors: [],
        uploading: false,
        importResultVisible: false,

        loading: false,
        brandCode: ''  //传到后台存储单前选中的品牌代码，在批量导入时需要用到该品牌代码
      }
    },

    props: {
      modelUploadVisiable: {
        default: false
      },
      modelInstId: '',
    },

    computed: {
      show: {
        get: function () {
          return this.modelUploadVisiable
        },
        set: function () {
        }
      },

    },

    methods: {
      onClose() {
        // this.reset()
        this.fileList = []
        this.$emit('close')
      },

      handleClose() {
        this.importResultVisible = false
      },
      downloadTemplate() {
        this.$download('modelAdmin/downloadTemplate', {}, '终端型号导入模板.xlsx')
      },

      setImportBrandCode({...params}){
        this.brandCode = params.brandCode
      },

      handleRemove(file) {
        if (this.uploading) {
          this.$message.warning('文件导入中，请勿删除')
          return
        }
        const index = this.fileList.indexOf(file)
        const newFileList = this.fileList.slice()
        newFileList.splice(index, 1)
        this.fileList = newFileList
      },
      beforeUpload(file) {
        this.fileList = [...this.fileList, file]
        return false
      },
      handleUpload() {
        const {fileList} = this
        const formData = new FormData()
        formData.append('file', fileList[0])
        this.uploading = true
        let  brandCode = this.brandCode
        formData.append('brandCode', brandCode)
        formData.append('instId', this.modelInstId)
        this.$upload('modelAdmin/import', formData).then((r) => {
          let data = r.data.data

          this.importData = data.data
          this.errors = data.error
          this.times = data.time / 1000
          this.uploading = false
          this.fileList = []
          this.importResultVisible = true
        }).catch((r) => {
          console.error(r)
          this.uploading = false
          this.fileList = []
        })
      },

    }
  }
</script>

<style lang="less" scoped>
  @import "../../../../../../static/less/Common";

  .option-area {
    display: inline-block;
    width: 100%;
    padding: 0 .9rem;
    margin: .5rem 0;

    .upload-area {
      display: inline;
      float: left;
      width: 50%
    }

    .button-area {
      margin-left: 1rem;
      display: inline;
      float: right;
      width: 30%;
    }
  }
</style>

